<template>
  <div class="score-gap-analysis">
    <!-- 排名维度切换 -->
    <div class="mb-6">
      <div class="flex space-x-3">
        <button v-for="dimension in dimensions" :key="dimension.key" @click="currentDimension = dimension.key" :class="[
            'px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200',
            currentDimension === dimension.key
              ? 'bg-blue-100 text-blue-700 border border-blue-200'
              : 'bg-gray-100 text-gray-600 hover:bg-gray-200 border border-transparent'
          ]">
          {{ dimension.name }}
        </button>
      </div>
    </div>

    <!-- 分数差距概览 -->
    <div class="bg-white rounded-xl p-6 border border-gray-200 mb-6">
      <div class="flex items-center justify-between mb-4">
        <h4 class="text-lg font-semibold text-gray-800 flex items-center">
          <div class="i-mdi:chart-bar text-xl text-blue-500 mr-2"></div>
          分数差距概览
          <span class="text-sm font-normal text-gray-600 ml-2">({{ currentMonthText }})</span>
        </h4>
        <div class="flex items-center space-x-3">
          <label class="text-sm text-gray-600">选择月份:</label>
          <select v-model="selectedMonth" @change="handleMonthChange"
            class="px-3 py-1 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
            <option v-for="month in availableMonths" :key="month.value" :value="month.value">
              {{ month.label }}
            </option>
          </select>
        </div>
      </div>
      <div class="h-96">
        <div v-if="!currentGapData" class="w-full h-full flex items-center justify-center text-gray-500">
          <div class="text-center">
            <div class="i-mdi:loading text-4xl mb-2 animate-spin"></div>
            <div class="text-lg font-medium">加载中...</div>
            <div class="text-sm">正在获取成绩数据</div>
          </div>
        </div>
        <v-chart v-else class="w-full h-full" :option="waterfallChartOption" />
      </div>
    </div>

    <!-- 排名差距趋势分析 -->
    <div class="bg-white rounded-xl p-6 border border-gray-200 mb-6">
      <h4 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
        <div class="i-mdi:chart-line text-xl text-green-500 mr-2"></div>
        排名差距趋势分析
      </h4>
      <div class="h-96">
        <div v-if="!rankTrendChartData.months.length || !rankTrendChartData.rankData.length"
          class="w-full h-full flex items-center justify-center text-gray-500">
          <div class="text-center">
            <div class="i-mdi:loading text-4xl mb-2 animate-spin"></div>
            <div class="text-lg font-medium">加载中...</div>
            <div class="text-sm">正在获取趋势数据</div>
          </div>
        </div>
        <v-chart v-else class="w-full h-full" :option="rankTrendChartOption" />
      </div>
    </div>

    <!-- 追赶目标建议 -->
    <div class="bg-gradient-to-r from-purple-50 to-blue-50 rounded-xl p-6 border border-purple-200">
      <h4 class="text-lg font-semibold text-purple-800 mb-4 flex items-center">
        <div class="i-mdi:lightbulb text-xl text-yellow-500 mr-2"></div>
        追赶目标建议
      </h4>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-white rounded-lg p-4 border border-purple-100">
          <div class="text-sm font-semibold text-purple-700 mb-2">短期目标</div>
          <div class="text-gray-600 text-sm">{{ currentGapData?.shortTermGoal || '加载中...' }}</div>
        </div>
        <div class="bg-white rounded-lg p-4 border border-purple-100">
          <div class="text-sm font-semibold text-purple-700 mb-2">中期目标</div>
          <div class="text-gray-600 text-sm">{{ currentGapData?.mediumTermGoal || '加载中...' }}</div>
        </div>
        <div class="bg-white rounded-lg p-4 border border-purple-100">
          <div class="text-sm font-semibold text-purple-700 mb-2">长期目标</div>
          <div class="text-gray-600 text-sm">{{ currentGapData?.longTermGoal || '加载中...' }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import dayjs from 'dayjs'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

// 注册 ECharts 组件
use([
  CanvasRenderer,
  BarChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

// 定义props
const props = defineProps({
  // 分数差距数据 - 支持多月份数据
  gapData: {
    type: Object,
    default: () => ({
      // 默认数据（当前月份）
      '2024-12': {
        class: {
          gapToTop5: 25,
          avgGapToTop5: 15,
          gapToTop10: 18,
          avgGapToTop10: 12,
          gapToBottom5: 32,
          avgGapToBottom5: 20,
          gapToBottom10: 28,
          avgGapToBottom10: 18,
          gapToFirst: 35,
          gapToThird: 22,
          gapToFifth: 15,
          gapToTenth: 8,
          leadToFifteenth: 12,
          leadToTwentieth: 18,
          leadToTwentyFifth: 25,
          leadToThirtieth: 32,
          shortTermGoal: '努力缩小与前5名的差距，争取进入前10名',
          mediumTermGoal: '稳定保持在前10名，争取进入前5名',
          longTermGoal: '冲击前3名，成为班级顶尖学生'
        },
        grade: {
          gapToTop5: 45,
          avgGapToTop5: 28,
          gapToTop10: 32,
          avgGapToTop10: 22,
          gapToBottom5: 58,
          avgGapToBottom5: 35,
          gapToBottom10: 48,
          avgGapToBottom10: 28,
          gapToFirst: 65,
          gapToThird: 42,
          gapToFifth: 28,
          gapToTenth: 15,
          leadToFifteenth: 22,
          leadToTwentieth: 35,
          leadToTwentyFifth: 48,
          leadToThirtieth: 62,
          shortTermGoal: '在年级中保持前15%的位置',
          mediumTermGoal: '争取进入年级前10%',
          longTermGoal: '冲击年级前5%，成为年级优秀学生'
        },
        major: {
          gapToTop5: 38,
          avgGapToTop5: 25,
          gapToTop10: 28,
          avgGapToTop10: 18,
          gapToBottom5: 45,
          avgGapToBottom5: 28,
          gapToBottom10: 38,
          avgGapToBottom10: 22,
          gapToFirst: 52,
          gapToThird: 35,
          gapToFifth: 22,
          gapToTenth: 12,
          leadToFifteenth: 18,
          leadToTwentieth: 28,
          leadToTwentyFifth: 38,
          leadToThirtieth: 48,
          shortTermGoal: '在专业中保持前12%的位置',
          mediumTermGoal: '争取进入专业前8%',
          longTermGoal: '冲击专业前5%，成为专业优秀学生'
        }
      },
      // 模拟其他月份的数据
      '2024-11': {
        class: {
          gapToTop5: 28,
          avgGapToTop5: 18,
          gapToTop10: 22,
          avgGapToTop10: 15,
          gapToBottom5: 35,
          avgGapToBottom5: 22,
          gapToBottom10: 30,
          avgGapToBottom10: 20,
          gapToFirst: 40,
          gapToThird: 25,
          gapToFifth: 18,
          gapToTenth: 10,
          leadToFifteenth: 15,
          leadToTwentieth: 22,
          leadToTwentyFifth: 28,
          leadToThirtieth: 35,
          shortTermGoal: '努力缩小与前5名的差距，争取进入前10名',
          mediumTermGoal: '稳定保持在前10名，争取进入前5名',
          longTermGoal: '冲击前3名，成为班级顶尖学生'
        },
        grade: {
          gapToTop5: 48,
          avgGapToTop5: 30,
          gapToTop10: 35,
          avgGapToTop10: 25,
          gapToBottom5: 62,
          avgGapToBottom5: 38,
          gapToBottom10: 52,
          avgGapToBottom10: 32,
          gapToFirst: 70,
          gapToThird: 45,
          gapToFifth: 32,
          gapToTenth: 18,
          leadToFifteenth: 25,
          leadToTwentieth: 38,
          leadToTwentyFifth: 52,
          leadToThirtieth: 68,
          shortTermGoal: '在年级中保持前15%的位置',
          mediumTermGoal: '争取进入年级前10%',
          longTermGoal: '冲击年级前5%，成为年级优秀学生'
        },
        major: {
          gapToTop5: 42,
          avgGapToTop5: 28,
          gapToTop10: 32,
          avgGapToTop10: 22,
          gapToBottom5: 50,
          avgGapToBottom5: 32,
          gapToBottom10: 42,
          avgGapToBottom10: 26,
          gapToFirst: 58,
          gapToThird: 38,
          gapToFifth: 26,
          gapToTenth: 15,
          leadToFifteenth: 22,
          leadToTwentieth: 32,
          leadToTwentyFifth: 42,
          leadToThirtieth: 52,
          shortTermGoal: '在专业中保持前12%的位置',
          mediumTermGoal: '争取进入专业前8%',
          longTermGoal: '冲击专业前5%，成为专业优秀学生'
        }
      }
    })
  },
  // 排名维度配置
  dimensions: {
    type: Array,
    default: () => [
      { key: 'class', name: '班级排名' },
      { key: 'grade', name: '年级排名' },
      { key: 'major', name: '专业排名' }
    ]
  },
  // 默认选中的维度
  defaultDimension: {
    type: String,
    default: 'class'
  },
  // 排名趋势数据 - 支持多月份数据
  rankTrendData: {
    type: Object,
    default: () => ({
      // 默认数据（近6个月）
      '2024-12': {
        class: { rank: 8, score: 85, avgScore: 78, gapToAvg: 7 },
        grade: { rank: 45, score: 85, avgScore: 82, gapToAvg: 3 },
        major: { rank: 12, score: 85, avgScore: 80, gapToAvg: 5 }
      },
      '2024-11': {
        class: { rank: 10, score: 82, avgScore: 77, gapToAvg: 5 },
        grade: { rank: 52, score: 82, avgScore: 81, gapToAvg: 1 },
        major: { rank: 15, score: 82, avgScore: 79, gapToAvg: 3 }
      },
      '2024-10': {
        class: { rank: 12, score: 80, avgScore: 76, gapToAvg: 4 },
        grade: { rank: 58, score: 80, avgScore: 80, gapToAvg: 0 },
        major: { rank: 18, score: 80, avgScore: 78, gapToAvg: 2 }
      },
      '2024-09': {
        class: { rank: 15, score: 78, avgScore: 75, gapToAvg: 3 },
        grade: { rank: 65, score: 78, avgScore: 79, gapToAvg: -1 },
        major: { rank: 22, score: 78, avgScore: 77, gapToAvg: 1 }
      },
      '2024-08': {
        class: { rank: 18, score: 75, avgScore: 74, gapToAvg: 1 },
        grade: { rank: 72, score: 75, avgScore: 78, gapToAvg: -3 },
        major: { rank: 25, score: 75, avgScore: 76, gapToAvg: -1 }
      },
      '2024-07': {
        class: { rank: 20, score: 72, avgScore: 73, gapToAvg: -1 },
        grade: { rank: 78, score: 72, avgScore: 77, gapToAvg: -5 },
        major: { rank: 28, score: 72, avgScore: 75, gapToAvg: -3 }
      }
    })
  }
})

// 定义emits
const emit = defineEmits(['dimension-change'])

// 当前排名维度
const currentDimension = ref(props.defaultDimension)

// 月份选择相关
const selectedMonth = ref('')
const availableMonths = ref([])

// 生成最近6个月的选项
const generateMonthOptions = () => {
  const months = []
  const currentDate = dayjs()

  for (let i = 0; i < 6; i++) {
    const monthDate = currentDate.subtract(i, 'month')
    months.push({
      value: monthDate.format('YYYY-MM'),
      label: monthDate.format('YYYY年M月')
    })
  }

  return months
}

// 当前月份文本
const currentMonthText = computed(() => {
  if (!selectedMonth.value) return ''
  return dayjs(selectedMonth.value).format('YYYY年M月')
})

// 当前月份的数据
const currentMonthData = ref(null)

// 当前维度的差距数据
const currentGapData = computed(() => {
  if (!currentMonthData.value) return null
  return currentMonthData.value[currentDimension.value]
})

// 排名趋势数据
const rankTrendChartData = computed(() => {
  // 确保 availableMonths 有数据
  if (!availableMonths.value.length) {
    return {
      months: [],
      rankData: [],
      gapData: [],
      scoreData: [],
      avgScoreData: []
    }
  }

  const months = availableMonths.value.map(m => m.value).reverse() // 按时间顺序排列
  const rankData = []
  const gapData = []
  const scoreData = []
  const avgScoreData = []

  months.forEach(month => {
    let monthData = props.rankTrendData[month]

    // 如果该月份没有数据，生成模拟数据
    if (!monthData || !monthData[currentDimension.value]) {
      monthData = generateMockRankTrendData(month)
    }

    if (monthData && monthData[currentDimension.value]) {
      const data = monthData[currentDimension.value]
      rankData.push(data.rank)
      gapData.push(data.gapToAvg)
      scoreData.push(data.score)
      avgScoreData.push(data.avgScore)
    }
  })

  const result = {
    months: months.map(m => dayjs(m).format('M月')),
    rankData,
    gapData,
    scoreData,
    avgScoreData
  }

  // 调试信息
  console.log('rankTrendChartData 计算结果:', result)

  return result
})

// 瀑布图配置 - 排名差距趋势
const waterfallChartOption = computed(() => {
  const data = [
    { name: '第1名', value: currentGapData.value.gapToFirst, itemStyle: { color: '#ef4444' } },
    { name: '第3名', value: currentGapData.value.gapToThird, itemStyle: { color: '#f97316' } },
    { name: '第5名', value: currentGapData.value.gapToFifth, itemStyle: { color: '#eab308' } },
    { name: '第10名', value: currentGapData.value.gapToTenth, itemStyle: { color: '#3b82f6' } },
    { name: '第15名', value: -currentGapData.value.leadToFifteenth, itemStyle: { color: '#10b981' } },
    { name: '第20名', value: -currentGapData.value.leadToTwentieth, itemStyle: { color: '#8b5cf6' } },
    { name: '第25名', value: -currentGapData.value.leadToTwentyFifth, itemStyle: { color: '#06b6d4' } },
    { name: '第30名', value: -currentGapData.value.leadToThirtieth, itemStyle: { color: '#84cc16' } }
  ]

  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: (params) => {
        const data = params[0]
        const value = data.value
        const isPositive = value > 0
        return `${data.name}<br/>${isPositive ? '差距' : '领先'}: ${Math.abs(value)} 分`
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: data.map(item => item.name),
      axisLabel: {
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      name: '分数差距',
      axisLabel: {
        formatter: '{value} 分'
      }
    },
    series: [
      {
        type: 'bar',
        data: data,
        label: {
          show: true,
          position: 'top',
          formatter: (params) => {
            const value = params.value
            return value > 0 ? `+${value}` : `${value}`
          }
        },
        itemStyle: {
          borderRadius: [4, 4, 0, 0]
        }
      }
    ]
  }
})

// 排名趋势折线图配置
const rankTrendChartOption = computed(() => {
  const { months, rankData, gapData, scoreData, avgScoreData } = rankTrendChartData.value

  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      formatter: (params) => {
        let result = `${params[0].axisValue}<br/>`
        params.forEach(param => {
          const color = param.color
          const name = param.seriesName
          const value = param.value
          if (name === '排名') {
            result += `<span style="color:${color}">●</span> ${name}: 第${value}名<br/>`
          } else if (name === '与平均分差距') {
            const sign = value >= 0 ? '+' : ''
            result += `<span style="color:${color}">●</span> ${name}: ${sign}${value}分<br/>`
          } else {
            result += `<span style="color:${color}">●</span> ${name}: ${value}分<br/>`
          }
        })
        return result
      }
    },
    legend: {
      data: ['排名', '总分', '平均分', '与平均分差距'],
      top: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: months,
      axisLabel: {
        color: '#666'
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '排名',
        position: 'left',
        inverse: true, // 排名越小越好，所以反转Y轴
        min: 1,
        axisLabel: {
          formatter: '第{value}名',
          color: '#666'
        },
        axisLine: {
          lineStyle: {
            color: '#ff6b6b'
          }
        },
        splitLine: {
          show: false
        }
      },
      {
        type: 'value',
        name: '分数',
        position: 'right',
        axisLabel: {
          formatter: '{value}分',
          color: '#666'
        },
        axisLine: {
          lineStyle: {
            color: '#4ecdc4'
          }
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '排名',
        type: 'line',
        yAxisIndex: 0,
        data: rankData,
        smooth: true,
        lineStyle: {
          color: '#ff6b6b',
          width: 3
        },
        itemStyle: {
          color: '#ff6b6b'
        },
        symbol: 'circle',
        symbolSize: 8,
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(255, 107, 107, 0.3)' },
              { offset: 1, color: 'rgba(255, 107, 107, 0.1)' }
            ]
          }
        }
      },
      {
        name: '总分',
        type: 'line',
        yAxisIndex: 1,
        data: scoreData,
        smooth: true,
        lineStyle: {
          color: '#4ecdc4',
          width: 3
        },
        itemStyle: {
          color: '#4ecdc4'
        },
        symbol: 'diamond',
        symbolSize: 8
      },
      {
        name: '平均分',
        type: 'line',
        yAxisIndex: 1,
        data: avgScoreData,
        smooth: true,
        lineStyle: {
          color: '#45b7d1',
          width: 2,
          type: 'dashed'
        },
        itemStyle: {
          color: '#45b7d1'
        },
        symbol: 'rect',
        symbolSize: 6
      },
      {
        name: '与平均分差距',
        type: 'line',
        yAxisIndex: 1,
        data: gapData,
        smooth: true,
        lineStyle: {
          color: '#96ceb4',
          width: 2
        },
        itemStyle: {
          color: '#96ceb4'
        },
        symbol: 'triangle',
        symbolSize: 6
      }
    ]
  }
})

// 监听维度变化
const handleDimensionChange = (dimension) => {
  currentDimension.value = dimension
  emit('dimension-change', dimension)
}

// 获取指定月份的数据
const fetchMonthData = async (month) => {
  try {
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 300))

    // 从props中获取数据，如果没有则使用默认数据
    const monthData = props.gapData[month]

    if (monthData) {
      currentMonthData.value = monthData
    } else {
      // 如果没有该月份的数据，生成模拟数据
      currentMonthData.value = generateMockMonthData(month)
    }
  } catch (error) {
    console.error('获取月份数据失败:', error)
    // 使用默认数据作为fallback
    currentMonthData.value = generateMockMonthData(month)
  }
}

// 生成模拟月份数据
const generateMockMonthData = (month) => {
  const monthDate = dayjs(month)
  const monthDiff = dayjs().diff(monthDate, 'month')

  // 根据月份差异调整数据
  const factor = 1 + (monthDiff * 0.1) // 越早的月份数据越大

  return {
    class: {
      gapToTop5: Math.round(25 * factor),
      avgGapToTop5: Math.round(15 * factor),
      gapToTop10: Math.round(18 * factor),
      avgGapToTop10: Math.round(12 * factor),
      gapToBottom5: Math.round(32 * factor),
      avgGapToBottom5: Math.round(20 * factor),
      gapToBottom10: Math.round(28 * factor),
      avgGapToBottom10: Math.round(18 * factor),
      gapToFirst: Math.round(35 * factor),
      gapToThird: Math.round(22 * factor),
      gapToFifth: Math.round(15 * factor),
      gapToTenth: Math.round(8 * factor),
      leadToFifteenth: Math.round(12 * factor),
      leadToTwentieth: Math.round(18 * factor),
      leadToTwentyFifth: Math.round(25 * factor),
      leadToThirtieth: Math.round(32 * factor),
      shortTermGoal: '努力缩小与前5名的差距，争取进入前10名',
      mediumTermGoal: '稳定保持在前10名，争取进入前5名',
      longTermGoal: '冲击前3名，成为班级顶尖学生'
    },
    grade: {
      gapToTop5: Math.round(45 * factor),
      avgGapToTop5: Math.round(28 * factor),
      gapToTop10: Math.round(32 * factor),
      avgGapToTop10: Math.round(22 * factor),
      gapToBottom5: Math.round(58 * factor),
      avgGapToBottom5: Math.round(35 * factor),
      gapToBottom10: Math.round(48 * factor),
      avgGapToBottom10: Math.round(28 * factor),
      gapToFirst: Math.round(65 * factor),
      gapToThird: Math.round(42 * factor),
      gapToFifth: Math.round(28 * factor),
      gapToTenth: Math.round(15 * factor),
      leadToFifteenth: Math.round(22 * factor),
      leadToTwentieth: Math.round(35 * factor),
      leadToTwentyFifth: Math.round(48 * factor),
      leadToThirtieth: Math.round(62 * factor),
      shortTermGoal: '在年级中保持前15%的位置',
      mediumTermGoal: '争取进入年级前10%',
      longTermGoal: '冲击年级前5%，成为年级优秀学生'
    },
    major: {
      gapToTop5: Math.round(38 * factor),
      avgGapToTop5: Math.round(25 * factor),
      gapToTop10: Math.round(28 * factor),
      avgGapToTop10: Math.round(18 * factor),
      gapToBottom5: Math.round(45 * factor),
      avgGapToBottom5: Math.round(28 * factor),
      gapToBottom10: Math.round(38 * factor),
      avgGapToBottom10: Math.round(22 * factor),
      gapToFirst: Math.round(52 * factor),
      gapToThird: Math.round(35 * factor),
      gapToFifth: Math.round(22 * factor),
      gapToTenth: Math.round(12 * factor),
      leadToFifteenth: Math.round(18 * factor),
      leadToTwentieth: Math.round(28 * factor),
      leadToTwentyFifth: Math.round(38 * factor),
      leadToThirtieth: Math.round(48 * factor),
      shortTermGoal: '在专业中保持前12%的位置',
      mediumTermGoal: '争取进入专业前8%',
      longTermGoal: '冲击专业前5%，成为专业优秀学生'
    }
  }
}

// 生成模拟排名趋势数据
const generateMockRankTrendData = (month) => {
  const monthDate = dayjs(month)
  const monthDiff = dayjs().diff(monthDate, 'month')

  // 根据月份差异调整数据，越早的月份排名越差，分数越低
  const rankFactor = 1 + (monthDiff * 0.15)
  const scoreFactor = 1 - (monthDiff * 0.02)

  return {
    class: {
      rank: Math.round(8 * rankFactor),
      score: Math.round(85 * scoreFactor),
      avgScore: Math.round(78 * scoreFactor),
      gapToAvg: Math.round(7 * scoreFactor)
    },
    grade: {
      rank: Math.round(45 * rankFactor),
      score: Math.round(85 * scoreFactor),
      avgScore: Math.round(82 * scoreFactor),
      gapToAvg: Math.round(3 * scoreFactor)
    },
    major: {
      rank: Math.round(12 * rankFactor),
      score: Math.round(85 * scoreFactor),
      avgScore: Math.round(80 * scoreFactor),
      gapToAvg: Math.round(5 * scoreFactor)
    }
  }
}

// 监听月份变化
const handleMonthChange = () => {
  // 获取当月数据并更新图表
  fetchMonthData(selectedMonth.value)
}

// 组件初始化
onMounted(async () => {
  // 先生成月份选项
  availableMonths.value = generateMonthOptions()

  // 默认选择当前月份
  selectedMonth.value = availableMonths.value[0]?.value || ''

  // 获取当前月份的数据
  if (selectedMonth.value) {
    await fetchMonthData(selectedMonth.value)
  }

  // 确保排名趋势数据有默认值
  console.log('排名趋势数据:', rankTrendChartData.value)
})

// 暴露方法给父组件
defineExpose({
  currentDimension,
  currentGapData,
  selectedMonth,
  setDimension: (dimension) => {
    currentDimension.value = dimension
  },
  setMonth: async (month) => {
    selectedMonth.value = month
    await fetchMonthData(month)
  },
  fetchMonthData
})
</script>

<style lang="scss" scoped>
.score-gap-analysis {
  // 组件样式
}
</style> 